<template>
    <div class="parameterized-carousel-demo">
        <h2>数据参数化轮播 + Font Awesome自定义指示器</h2>

        <!-- 1. 基础数据驱动轮播（圆点图标指示器） -->
        <div class="demo-section">
            <h3>1. 基础数据驱动轮播</h3>
            <Carousel :interval="3000" height="300px" indicatorColor="transparent">
                <div v-for="(item, index) in basicSlides" :key="item.id" class="carousel-item-wrapper">
                    <div class="slide" :style="{ backgroundColor: item.color }">
                        <h3>{{ item.title }}</h3>
                        <p>{{ item.description }}</p>
                    </div>
                </div>

                <!-- 原生i标签：fa-图标类型 + fa-图标名 -->
                <template #indicator="{ index, active }">
                    <span class="fa-indicator dot-indicator">
                        <i 
                            :class="['fa', active ? 'fa-solid' : 'fa-regular', 'fa-circle', active ? 'text-primary' : 'text-gray-400']"
                            :title="`第${index + 1}页`"
                        ></i>
                    </span>
                </template>
            </Carousel>
        </div>


        <!-- 2. 图片轮播数据参数化（相机图标指示器） -->
        <div class="demo-section">
            <h3>2. 图片轮播数据参数化</h3>
            <p class="demo-description">相机图标指示器 + 图片数据轮播</p>
            <Carousel width="800px" height="450px" :interval="5000" controlBg="rgba(0,0,0,0.4)" controlColor="#fff"
                indicatorColor="transparent">
                <div v-for="(slide, index) in imageSlides" :key="slide.id" class="img-slide-container">
                    <!-- 图片加载容错 -->
                    <img 
                        :src="slide.imageUrl" 
                        :alt="slide.altText" 
                        class="carousel-image"
                        @error="handleImgError"
                    />
                    <div class="image-overlay">
                        <h3>{{ slide.title }}</h3>
                        <p>{{ slide.description }}</p>
                        <a v-if="slide.link" :href="slide.link" class="slide-link" target="_blank">
                            查看详情 →
                            <i class="fa fa-solid fa-arrow-right ml-1"></i>
                        </a>
                    </div>
                </div>

                <template #indicator="{ index, active }">
                    <span class="fa-indicator camera-indicator">
                        <i 
                            :class="['fa', active ? 'fa-solid' : 'fa-regular', 'fa-camera-retro', active ? 'text-blue-400' : 'text-white/60']"
                            :style="{ transform: active ? 'scale(1.2)' : 'scale(1)' }"
                            :title="imageSlides[index].title"
                        ></i>
                    </span>
                </template>
            </Carousel>
        </div>


        <!-- 3. 动态加载数据（数字+星星组合指示器） -->
        <div class="demo-section">
            <h3>3. 动态加载数据</h3>
            <p class="demo-description">数字+星星图标指示器 + 动态数据</p>

            <button @click="loadDynamicSlides" :disabled="isLoading" class="load-data-btn">
                <i 
                    :class="['fa', 'fa-solid', isLoading ? 'fa-spinner fa-spin mr-2' : 'fa-download mr-2']"
                ></i>
                {{ isLoading ? '加载中...' : '加载轮播数据' }}
            </button>

            <Carousel v-if="dynamicSlides.length > 0" height="350px" :interval="4000" indicatorPosition="top"
                indicatorColor="transparent">
                <div v-for="(slide, index) in dynamicSlides" :key="slide.id" class="dynamic-slide">
                    <img 
                        :src="slide.image" 
                        :alt="slide.title" 
                        class="dynamic-slide-img"
                        @error="handleImgError"
                    />
                    <div class="dynamic-slide-content">
                        <h3>{{ slide.title }}</h3>
                        <p>{{ slide.content }}</p>
                        <div class="slide-meta">
                            <span>
                                <i class="fa fa-regular fa-calendar mr-1"></i>
                                {{ slide.date }}
                            </span>
                            <span>
                                <i class="fa fa-regular fa-eye mr-1"></i>
                                {{ slide.views }} 次查看
                            </span>
                        </div>
                    </div>
                </div>

                <template #indicator="{ index, active }">
                    <span class="fa-indicator number-star-indicator" :class="{ active }">
                        <i class="fa fa-solid fa-star mr-1"></i>
                        <span class="indicator-number">{{ index + 1 }}</span>
                    </span>
                </template>
            </Carousel>

            <div v-else-if="!isLoading" class="no-data-message">
                <i class="fa fa-regular fa-image mr-2"></i>
                点击上方按钮加载轮播数据
            </div>
        </div>


        <!-- 4. 自定义数据模板（垂直轮播+形状图标指示器） -->
        <div class="demo-section">
            <h3>4. 自定义数据模板</h3>
            <Carousel height="200px" :interval="3500" direction="vertical" indicatorPosition="right"
                indicatorColor="transparent" ref="verticalCarousel">
                <template v-for="(item, index) in customTemplateSlides" :key="item.id">
                    <div class="carousel-item-wrapper">
                        <div class="custom-slide" :class="'custom-slide-' + item.type">
                            <div v-if="item.type === 'text'">
                                <h4>
                                    <i class="fa fa-solid fa-bullhorn mr-2"></i>
                                    {{ item.title }}
                                </h4>
                                <p>{{ item.content }}</p>
                            </div>

                            <div v-if="item.type === 'quote'">
                                <i class="fa fa-solid fa-quote-left quote-icon"></i>
                                <p>{{ item.quote }}</p>
                                <p class="quote-author">— {{ item.author }}</p>
                            </div>

                            <div v-if="item.type === 'notification'">
                                <div class="notification-icon">
                                    <!-- 原生图标类名匹配 -->
                                    <i :class="['fa', 'fa-solid', item.icon === 'bell' ? 'fa-bell' : 'fa-circle-info']"></i>
                                </div>
                                <div class="notification-content">
                                    <h4>{{ item.title }}</h4>
                                    <p>{{ item.message }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>

                <!-- 垂直轮播指示器：原生i标签 + 动态类名 -->
                <template #indicator="{ index, active }">
                    <span class="fa-indicator shape-indicator" :class="{ active }">
                        <i :class="['fa', getShapeIcon(index, active), getShapeColor(index, active)]"></i>
                    </span>
                </template>
            </Carousel>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
// 移除 FontAwesomeIcon 组件导入
import Carousel from '@/components/commons/carousel/index.vue';

// --------------------------
// 1. 保留类型接口（确保类型安全）
// --------------------------
interface BasicSlide {
    id: number;
    title: string;
    description: string;
    color: string;
}

interface ImageSlide {
    id: number;
    title: string;
    description: string;
    imageUrl: string;
    altText: string;
    link?: string;
}

interface DynamicSlide {
    id: number;
    title: string;
    content: string;
    image: string;
    date: string;
    views: number;
}

type CustomSlideType = 'text' | 'quote' | 'notification';
interface CustomTemplateSlide {
    id: number;
    type: CustomSlideType;
    title?: string;
    content?: string;
    quote?: string;
    author?: string;
    message?: string;
    icon?: 'bell' | 'circle-info'; // 匹配原生图标名（fa-bell → 'bell'）
}

// --------------------------
// 2. 轮播数据（保持不变）
// --------------------------
const basicSlides: BasicSlide[] = [
    { id: 1, title: '第一页', description: '基础数据驱动的轮播项 1', color: '#42b983' },
    { id: 2, title: '第二页', description: '基础数据驱动的轮播项 2', color: '#3498db' },
    { id: 3, title: '第三页', description: '基础数据驱动的轮播项 3', color: '#e74c3c' }
];

const imageSlides: ImageSlide[] = [
    {
        id: 1, title: '山间湖泊', description: '大自然的美丽景色',
        imageUrl: 'https://picsum.photos/id/15/800/450', altText: '山间的湖泊和森林', link: '#'
    },
    {
        id: 2, title: '城市夜景', description: '繁华都市的夜晚',
        imageUrl: 'https://picsum.photos/id/25/800/450', altText: '城市夜景全景', link: '#'
    },
    {
        id: 3, title: '海洋生物', description: '奇妙的海底世界',
        imageUrl: 'https://picsum.photos/id/35/800/450', altText: '海洋中的珊瑚和鱼类', link: '#'
    },
    {
        id: 4, title: '乡村风光', description: '宁静的田园生活',
        imageUrl: 'https://picsum.photos/id/45/800/450', altText: '乡村小路和田野', link: '#'
    }
];

const dynamicSlides = ref<DynamicSlide[]>([]);
const isLoading = ref(false);
const verticalCarousel = ref<InstanceType<typeof Carousel> | null>(null);

// --------------------------
// 3. 核心函数（适配原生图标）
// --------------------------
// 动态加载数据（逻辑不变）
const loadDynamicSlides = async () => {
    isLoading.value = true;
    try {
        await new Promise((resolve) => setTimeout(resolve, 1500));
        dynamicSlides.value = [
            {
                id: 1,
                title: '科技新闻',
                content: '最新科技发展趋势和创新成果',
                image: 'https://picsum.photos/id/96/600/400',
                date: '2023-06-15',
                views: 1243
            },
            {
                id: 2,
                title: '健康生活',
                content: '保持健康的生活方式和饮食习惯',
                image: 'https://picsum.photos/id/91/600/400',
                date: '2023-06-10',
                views: 876
            },
            {
                id: 3,
                title: '旅行攻略',
                content: '探索世界美景的实用指南',
                image: 'https://picsum.photos/id/87/600/400',
                date: '2023-06-05',
                views: 2154
            }
        ];
    } catch (error) {
        console.error('动态轮播数据加载失败：', error);
        alert('数据加载失败，请重试');
    } finally {
        isLoading.value = false;
    }
};

// 图片加载容错（逻辑不变）
const handleImgError = (e: Event) => {
    const img = e.target as HTMLImageElement;
    img.src = 'https://picsum.photos/800/450?grayscale'; // 兜底图
    img.alt = '图片加载失败';
};

// 垂直轮播图标：返回原生图标类名（如 "fa-solid fa-square"）
const getShapeIcon = (index: number, active: boolean) => {
    const iconMap = [
        { active: 'fa-solid fa-square', inactive: 'fa-regular fa-square' },
        { active: 'fa-solid fa-diamond', inactive: 'fa-regular fa-diamond' },
        { active: 'fa-solid fa-triangle', inactive: 'fa-regular fa-triangle' },
        { active: 'fa-solid fa-circle', inactive: 'fa-regular fa-circle' }
    ];
    const target = iconMap[index % iconMap.length];
    return active ? target.active : target.inactive;
};

// 垂直轮播图标颜色（返回颜色类名）
const getShapeColor = (index: number, active: boolean) => {
    const colorMap = ['text-green-500', 'text-purple-500', 'text-orange-500', 'text-blue-500'];
    return active ? colorMap[index % colorMap.length] : 'text-gray-400';
};

// 自定义模板数据（保持图标名适配）
const customTemplateSlides: CustomTemplateSlide[] = [
    { id: 1, type: 'text', title: '系统通知', content: '系统将于今晚23:00进行维护升级' },
    { id: 2, type: 'quote', quote: '生活就像一盒巧克力，你永远不知道下一块会是什么味道。', author: 'Forrest Gump' },
    { id: 3, type: 'notification', title: '新消息提醒', message: '您有3条未读消息', icon: 'bell' }, // 匹配 fa-bell
    { id: 4, type: 'text', title: '活动通知', content: '年度大会将于6月30日举行，请准时参加' }
];
</script>

<style lang="scss" scoped>
// 引入Element Plus颜色变量（或自定义）
$primary: #409eff;
$gray-400: #c0c4cc;
$gray-500: #909399;
$white: #ffffff;

.parameterized-carousel-demo {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1rem;
    font-family: Arial, sans-serif;
}

h2 {
    text-align: center;
    color: #333;
    margin-bottom: 2rem;

    &::after {
        content: '';
        display: block;
        width: 80px;
        height: 3px;
        background: $primary;
        margin: 0.5rem auto;
    }
}

// 基础样式复用
.demo-section {
    margin-bottom: 3rem;
    padding: 1.5rem;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

h3 {
    margin-top: 0;
    color: #444;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;

    &::before {
        content: '';
        display: inline-block;
        width: 4px;
        height: 16px;
        background: $primary;
        margin-right: 8px;
        border-radius: 2px;
    }
}

.demo-description {
    color: #666;
    margin: 0.5rem 0 1rem;
    font-size: 0.9rem;
}

// --------------------------
// 原生Font Awesome图标样式（适配<i>标签）
// --------------------------
.fa-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;

    // 原生i标签图标样式控制
    i {
        display: inline-block;
        font-size: inherit; // 继承父容器字体大小
    }
}

// 1. 圆点指示器
.dot-indicator {
    margin: 0 6px;

    i {
        font-size: 12px;

        &.text-primary {
            color: $primary;
        }

        &.text-gray-400 {
            color: $gray-400;
        }
    }
}

// 2. 相机图标指示器
.camera-indicator {
    margin: 0 8px;

    i {
        font-size: 16px;
        transition: transform 0.3s;
    }
}

// 3. 数字+星星组合指示器
.number-star-indicator {
    margin: 0 8px;
    padding: 2px 10px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.05);
    color: #666;
    font-size: 0.85rem;

    i {
        font-size: 10px;
        color: #faad14;
    }

    &.active {
        background: $primary;
        color: #fff;

        i {
            color: #fff;
        }
    }

    .indicator-number {
        margin-left: 2px;
    }
}

// 4. 形状图标指示器（垂直）
.shape-indicator {
    display: block;
    margin: 12px 0;

    i {
        font-size: 18px;
    }

    &.active {
        transform: translateX(-4px);
    }
}

// --------------------------
// 轮播项样式（保持不变）
// --------------------------
.slide {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    padding: 20px;

    h3 {
        margin: 0 0 10px;
        color: white;
        border: none;
        font-size: 1.8rem;

        &::before {
            display: none;
        }
    }

    p {
        font-size: 1rem;
        margin: 0;
        opacity: 0.9;
    }
}

.img-slide-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;

    .carousel-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .image-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 20px;
        background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
        color: white;

        h3 {
            margin: 0 0 10px;
            color: white;
            border: none;

            &::before {
                display: none;
            }
        }

        p {
            margin: 0 0 15px;
            font-size: 0.9rem;
            opacity: 0.9;
        }

        .slide-link {
            display: inline-flex;
            align-items: center;
            color: #409eff;
            text-decoration: none;
            font-size: 0.9rem;
            padding: 5px 0;
            border-bottom: 1px solid #409eff;

            &:hover {
                color: #66b1ff;
                border-color: #66b1ff;
            }
        }
    }
}

.load-data-btn {
    margin-bottom: 1rem;
    padding: 8px 16px;
    background-color: $primary;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;

    &:hover {
        background-color: #66b1ff;
    }

    &:disabled {
        background-color: #a0cfff;
        cursor: not-allowed;
    }
}

.no-data-message {
    text-align: center;
    padding: 2rem;
    color: $gray-500;
    background-color: #f9f9f9;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}

.dynamic-slide {
    display: flex;
    width: 100%;
    height: 100%;
    background-color: #f5f7fa;

    .dynamic-slide-img {
        width: 30%;
        height: 100%;
        object-fit: cover;
    }

    .dynamic-slide-content {
        width: 70%;
        padding: 20px;
        overflow: hidden;

        h3 {
            margin-top: 0;
            color: #333;

            &::before {
                display: none;
            }
        }

        p {
            color: #666;
            font-size: 0.9rem;
            line-height: 1.6;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
    }

    .slide-meta {
        margin-top: 15px;
        font-size: 0.8rem;
        color: $gray-500;
        display: flex;
        gap: 20px;
    }
}

.custom-slide {
    width: 100%;
    height: 100%;
    padding: 20px;
    display: flex;
    align-items: center;
    position: relative;

    &.custom-slide-text {
        background-color: #f0f9eb;
        color: #52c41a;
    }

    &.custom-slide-quote {
        background-color: #f0f2f5;
        color: #1890ff;
        padding: 30px;

        .quote-icon {
            font-size: 3rem;
            color: rgba(24, 144, 255, 0.1);
            position: absolute;
            top: 10px;
            left: 10px;
        }

        p {
            font-style: italic;
            font-size: 1.1rem;
            margin: 0;
            padding-left: 20px;
        }

        .quote-author {
            text-align: right;
            font-style: normal;
            font-size: 0.9rem;
            margin-top: 10px;
            color: #666;
        }
    }

    &.custom-slide-notification {
        background-color: #fffbe6;
        color: #faad14;

        .notification-icon {
            font-size: 2rem;
            margin-right: 20px;
        }

        .notification-content {
            flex: 1;

            h4 {
                margin: 0 0 5px;
            }

            p {
                margin: 0;
                font-size: 0.9rem;
            }
        }
    }
}
</style>